import {
  Form,
  Button,
  Input,
  Row,
  Col,
  message
} from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import { FormItem } from '../data.d';
const FormItem = Form.Item;
import SingleDragger from '../../../../../components/Commons/SingleDragger'
import { connect } from 'dva';

export interface UpdateFormProps extends FormComponentProps {
  handleUpdateModalVisible: (flag?: boolean, formVals?: FormItem) => void;
  handleSave: (values: FormItem) => void;
  data: Partial<FormItem>;
  disabled: boolean;
  loading: boolean;
}

@connect(
  ({
    loading
  }: {
    loading: {
      models: {
        [key: string]: boolean;
      };
    };
  }) => ({
    loading: loading.models.applyAmount,
  }),
)
class ApplyAmountForm extends Component<UpdateFormProps> {

  constructor(props: UpdateFormProps) {
    super(props);
  }

  handleResetFields = () => {
    this.props.form.resetFields();
    this.props.handleUpdateModalVisible(false);
  };

  getForm = () => {
    const { form, handleSave } = this.props;
    let url = this.refs.creditorFile.getUrl();
    if (!url) {
      message.error("请先上传盖章协议");
      return;
    }
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...fieldsValue };
      formVals.creditorFile = url;
      handleSave(formVals);
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      data,
      disabled,
      loading
    } = this.props;

    return (
      <div>
        <Form style={{ marginTop: 8 }}>
          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>债务人名字</span>}>
                {getFieldDecorator('debtorName', {
                  rules: [{ required: true, message: '请填写债务人名字' }],
                  initialValue: data.debtorName,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>债务人地址</span>}>
                {getFieldDecorator('debtorAddress', {
                  rules: [{ required: true, message: '请填写债务人地址' }],
                  initialValue: data.debtorAddress,
                })(<Input maxLength={500} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>债务人电话</span>}>
                {getFieldDecorator('debtorMobile', {
                  rules: [{ required: true, message: '请填写债务人电话' }],
                  initialValue: data.debtorMobile,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>债务联系人</span>}>
                {getFieldDecorator('debtorLinkman', {
                  rules: [{ required: true, message: '请填写债务联系人' }],
                  initialValue: data.debtorLinkman,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>债务人邮箱</span>}>
                {getFieldDecorator('debtorEmail', {
                  rules: [{ required: true, message: '请填写债务人邮箱' }],
                  initialValue: data.debtorEmail,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>应收金额</span>}>
                {getFieldDecorator('revAmount', {
                  rules: [{ required: true, message: '请填写应收金额' }],
                  initialValue: data.revAmount,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>债权人名字</span>}>
                {getFieldDecorator('creditorName', {
                  rules: [{ required: true, message: '请填写债权人名字' }],
                  initialValue: data.creditorName,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>债权人地址</span>}>
                {getFieldDecorator('creditorAddress', {
                  rules: [{ required: true, message: '请填写债权人地址' }],
                  initialValue: data.creditorAddress,
                })(<Input maxLength={500} disabled={disabled} />)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col xs={24} md={6}>
              <FormItem label={<span>债权人电话</span>}>
                {getFieldDecorator('creditorMobile', {
                  rules: [{ required: true, message: '请填写债权人电话' }],
                  initialValue: data.creditorMobile,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label={<span>债权联系人</span>}>
                {getFieldDecorator('creditorLinkman', {
                  rules: [{ required: true, message: '请填写债权联系人' }],
                  initialValue: data.creditorLinkman,
                })(<Input maxLength={100} disabled={disabled} />)}
              </FormItem>
            </Col>
            <Col xs={24} md={6}>
              <FormItem label="盖章协议" hasFeedback>
                <SingleDragger ref="creditorFile" url={''} dataSource={''} module={"qianzhuang"} />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <Button style={{ display: disabled ? 'none' : 'inline-block' }} key="forward" type="primary" loading={loading} onClick={() => this.getForm()}>提交申请</Button>
              <Button key="cancel" style={{ marginTop: 8, marginLeft: 8 }} onClick={() => this.handleResetFields()}>返回</Button>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}

export default Form.create<UpdateFormProps>()(ApplyAmountForm);
